<template>
  <div >
    <nav-bar class="nav-bar-shopping">
      <div slot="center">购物车</div>
    </nav-bar>

    <tab-control v-show="isTabFixed" class="fixed" @itemClick="tabClick"
                 :titles="['流行', '新款', '精选']"></tab-control>
    <scroll class="content"
            ref="scroll"
            @scroll="contentScroll"
            @pullingUp="loadMore"
            :data="showGoodsList"
            :pull-up-load="true"
            :probe-type="3">
      <div>
        <swiper>
          <swiper-item v-for="item in banner">
            <img :src="item.image" alt="">
          </swiper-item>
        </swiper>
        <home-recommend :recommend="recommend" >

        </home-recommend>
        <home-rage>

        </home-rage>
        <!-- tab 选择之后有特殊效果，这个也是之前做过的   选择不同商品进行切换  下面展示-->
        <tab-control :titles="['流行', '新款', '精选']"  @itemClick="tabClick" >

        </tab-control>
        <!--展示商品列表 -->
        <goods-list :goods-list="showGoodsList"></goods-list>
      </div>
    </scroll>
    <back-top @backTop="backTop" class="back-top" v-show="showBackTop">
      <img src="~assets/img/common/top.png" alt="">
    </back-top>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
import HomeRecommend from "./children/HomeRecommend";
import HomeRage from "./children/HomeRage";
import TabControl from "components/content/tabControl/TabControl";
import GoodsList from "./children/GoodsList";
import Scroll from "components/common/scroll/Scroll";
import BackTop from "components/content/backTop/BackTop";
import {Swiper, SwiperItem} from "components/common/swiper"
import {request} from "network/request";
import {NEW, POP, SELL, BACKTOP_DISTANCE} from "common/constants";
import {getHomeData,getHomeMultidata,BANNER,RECOMMEND} from "network/home";

export default {
  name: "Home",
  components: {
    HomeRecommend,HomeRage,TabControl,GoodsList,Scroll,BackTop,
    NavBar,Swiper,SwiperItem
  },
  data(){
    return {
      banner: [],
      recommend: [],
      goodsList: {
        'pop': {page:1,list:[
            {title:'pop_t1',price:30.5,cfav:'pop1',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'},
            {title:'pop_t2',price:30.5,cfav:'pop2',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'},
            {title:'pop_t3',price:30.5,cfav:'pop3',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'},
            {title:'pop_t4',price:30.5,cfav:'pop4',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'}
          ]},
        'new': {page:1,list:[
            {title:'new_t1',price:30.5,cfav:'new1',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'},
            {title:'new_t2',price:30.5,cfav:'new2',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'},
            {title:'new_t3',price:30.5,cfav:'new3',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'},
            {title:'new_t4',price:30.5,cfav:'new4',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'}
          ]},
        'sell': {page:1,list:[
            {title:'sell_t1',price:30.5,cfav:'sell1',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'},
            {title:'sell_t2',price:30.5,cfav:'sell2',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'},
            {title:'sell_t3',price:30.5,cfav:'sell3',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'},
            {title:'sell_t4',price:30.5,cfav:'sell4',img:'https://s10.mogucdn.com/mlcdn/c45406/180926_45fkj8ifdj4l824l42dgf9hd0h495_750x390.jpg'}
          ]}
      },
      currentType: 'pop',
      isTabFixed: false,
      tabOffsetTop: 0,
      showBackTop: true
    }
  },
  methods: {
    tabClick(index){
      switch (index) {
        case 0:
          this.currentType = 'pop'
          break
        case 1:
          this.currentType = 'new'
          break
        case 2:
          this.currentType = 'sell'
          break
      }
    },
    contentScroll(position) {
      console.log("contentScroll");
      console.log(position);
      // 1.决定tabFixed是否显示
      this.isTabFixed = position.y < -this.tabOffsetTop

      // 2.决定backTop是否显示
      this.showBackTop = position.y < -BACKTOP_DISTANCE
    },
    loadMore() {
      console.log("loadMore");
      this.getHomeProducts(this.currentType)
    },
    backTop() {
      this.$refs.scroll.scrollTo(0, 0, 300)
    },
    getHomeProducts(type) {
      getHomeData(type, this.goodsList[type].page).then(res => {
        console.log("getHomeData");
        console.log(res);
        const goodsList = res.data.list;
        this.goodsList[type].list.push(...goodsList)
        this.goodsList[type].page += 1

        this.$refs.scroll.finishPullUp()
      })
    },
    getMultiData() {
      getHomeMultidata().then(res => {
        this.banner= res.data[BANNER].list
        this.recommend = res.data[RECOMMEND].list
        // 下次更新DOM时,获取新的tabOffsetTop值(不保险,可以在updated钩子中获取)
        this.$nextTick(() => {
          //this.tabOffsetTop = this.$refs.tabControl.$el.offsetTop
        })
      })
    }
  },
  computed: {
    showGoodsList(){
      return this.goodsList[this.currentType].list
    }
  },
  created() {
    // 1.请求多个数据
    this.getMultiData()
    // 2.请求商品数据
    // this.getHomeProducts(POP)
    // this.getHomeProducts(NEW)
    // this.getHomeProducts(SELL)
  },
  destroyed() {
  },
  activated() {
    console.log("activated");
    console.log(this.$parent);
    this.isActive=true
  },
  deactivated() {
    this.isActive=false
  }
}
</script>

<style scoped>
.nav-bar-shopping {
  background-color: var(--color-tint);
  color: #fff;

  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9;
}
</style>
